<template>
  <div>
    <el-dialog title="添加经纪" :visible="showingDialog" @close="closeFn">
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item prop="name" label="名称" label-width="180px">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item prop="email" label="邮箱" label-width="180px">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item prop="phone" label="电话" label-width="180px">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item prop="address" label="地址" label-width="180px">
          <el-input v-model="formData.address" />
        </el-form-item>
        <el-form-item prop="desc" label="描述" label-width="180px">
          <el-input v-model="formData.desc" type="textarea" />
        </el-form-item>
        <el-form-item prop="image" label="封面" label-width="180px">
          <up-img ref="UpImg" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="submitFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import upImg from '@/components/UpImg'
import { addAgent, submitEditAgent } from '@/api/agents'
export default {
  components: {
    upImg
  },
  props: {
    showingDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        desc: '',
        email: '',
        phone: '',
        name: '',
        image: '',
        address: '',
        id: 0
      },
      rules: {
        name: [{ required: true, message: '请输入用户名！', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号！', trigger: 'blur' }],
        desc: [{ required: true, message: '详情不能为空！', trigger: 'blur' }],
        address: [
          { required: true, message: '地址不能为空！', trigger: 'blur' }
        ],
        email: [{ required: true, message: '邮箱不能为空！', trigger: 'blur' }],
        img: [
          { required: true, message: '图片地址不能为空！', trigger: 'blur' }
        ]
      }
    }
  },
  updated() {
    // 图片数据的回显 需要判断表单内是否有图片数据
    if (this.formData.image) {
      console.log('go edit', this.formData.image)
      this.$refs.UpImg.dialogImageUrl = this.formData.image
    }
  },
  methods: {
    addFn() {
      this.showingDialog = true
    },
    closeFn() {
      this.$emit('update:showingDialog', false)
      this.$refs.form.resetFields()
      this.formData = {
        desc: '',
        email: '',
        phone: '',
        name: '',
        image: '',
        address: '',
        id: 0
      }
    //   console.log('close')
    },
    // 表单的提交
    async submitFn() {
      // 提交前 进行内容校验
      await this.$refs.form.validate()
      // 从表单输入获取图片路径 添加进提交内容对象
      this.formData.image = this.$refs.UpImg.imgUrl || this.$refs.UpImg.dialogImageUrl
      // 判断图片加载是否完成
      if (this.$refs.UpImg.percent > 0 && this.$refs.UpImg.percent < 100) {
        return this.$message.warning('请等待上传完成后提交')
      }
      // 判断是编辑 还是新增 依据为id
      if (this.formData.id) {
        console.log('edit submit', this.formData)
        await submitEditAgent(this.formData.id, this.formData).catch((error) => {
          console.log('failed to push edit', error)
        })
      } else {
        console.log('add submit', this.formData)
        await addAgent(this.formData).catch((error) => {
          console.log('failed to push add', error)
        })
      }
      this.$message.success('更新详情成功')
      this.$emit('updateEvent')
      // console.log('submit', this.$emit('updateEvent'))
      this.closeFn()
    }
  }
}
</script>

<style>
</style>
